<template>
    <div class="main">
        <div class="title">{{title}}</div>
        <div class="toolbar">
            <button @click="add('Text')">添加输入框</button>
            <button @click="add('Radio')">添加单选框</button>
            <button @click="add('Check')">添加多选框</button>
        </div>
        <el-alert v-if="formData.length>1"
                  effect="dark"
                  title="拖动可排序,增减或改变顺序会使该项填报失效！"
                  type="warning">
        </el-alert>
        <draggable class="container" v-model="formData" ghostClass="ghost" @end="move_click">
            <div v-for="(item,index) in formData" :key="index" class="item">
                <div class="type">{{jv.FormFieldTypeEnum.getData(item.type).remark}}
                    <el-button circle icon="el-icon-delete"
                               @click="remove_click(index)"></el-button>
                </div>

                <div style="margin-top:18px;">
                    <kv label="问卷角色" v-if="type == 'Questionnaire'">
                        <el-radio-group v-model="item.answerRole" chk="*">
                            <el-radio :label="item.name" v-for="(item,index) in AnswerRoleEnum" :key="item.name">
                                {{item.remark}}
                            </el-radio>
                        </el-radio-group>
                    </kv>
                    <kv :label="type == 'Ledger'? '名称' :'试题内容' ">
                        <el-input v-model="item.label" placeholder="具体指标项的名称"/>
                    </kv>
                    <kv :label="type == 'Ledger'? '数据': '选项' "
                        v-if="item.type == 'Radio' || item.type=='Check'">
                        <div>
                            <el-tag v-for="(it,index) in item.data" :key="it" closable
                                    style="margin-right:4px;"
                                    @close="item.data.removeAt(index)">{{it}}
                            </el-tag>

                            <input @keyup="keyup($event,item)" placeholder="回车确认每一项"/>
                        </div>
                    </kv>
                    <kv label="校验表达式" v-if="item.type == 'Text' || item.type=='Number'">
                        <el-input v-model="item.chk" type="textarea" autosize
                                  :placeholder="chk_placeholder" @dblclick.native="txt_dbClick(item)"/>
                    </kv>
                </div>
            </div>
        </draggable>

    </div>
</template>
<script>
    import draggable from 'vuedraggable'

    export default {
        components: {
            draggable,
        },
        props: {
            value: {
                type: Array, default() {
                    return []
                }
            },
            type: {
                type: String, default: ""
            },
            title: {type: String, default: ""}
        },
        watch: {
            value(v) {
                if (jv.dataEquals(this.formData, this.value)) return;
                this.formData = Object.assign([], this.value);
            }
        },
        data() {
            return {
                AnswerRoleEnum: jv.AnswerRoleEnum.getData(),
                chk_placeholder: "//value 变量表示当前值,返回值是错误信息\nif(value<0 || value>100) return '请输入0到100的数值';",
                formData: this.value
            }
        },
        computed: {},
        methods: {
            add(type) {
                this.formData.push({type: type, label: "", data: []});
                this.$emit("input", this.formData);
            },
            keyup(e, item) {
                var target = e.target;
                if (e.keyCode == 13) {
                    if (item.data.includes(target.value)) {
                        return;
                    }
                    item.data.push(target.value);

                    target.value = "";
                    this.$emit("input", this.formData);
                }
            },
            remove_click(index) {
                this.formData.removeAt(index);
                this.$emit("input", this.formData);
            },
            move_click() {
                if (jv.dataEquals(this.formData, this.value)) return;
                this.$emit("input", this.formData);
            },
            txt_dbClick(item) {
                if (!item.chk) {
                    item.chk = this.chk_placeholder;
                    this.formData.splice(0,0);
                }
            }
        }
    }
</script>
<style scoped>
    .main {
        margin-bottom: 20px;
        padding: 10px;
        background-color: #eee9e0;
        border: solid 1px #ccc;
    }

    .toolbar {
        display: flex;
        padding: 4px 0;
    }

    .toolbar button {
        padding: 4px 6px;
        margin-right: 8px;
        white-space: nowrap;
        overflow: hidden;
        word-break: break-all;
        text-overflow: ellipsis;
    }

    .container {
        border: 1px solid transparent;
        min-height: 150px;
        counter-reset: section;
    }

    .item {
        border: solid 1px #cccccc;
        margin: 30px;
        position: relative;
    }

    .item button {
        position: absolute;
        margin-left: 20px;
    }

    .item .type {
        background: #d68000;
        color: white;
        font-size: 20px;
        display: block;
        position: absolute;
        text-align: center;
        border-radius: 6px;
        margin: -18px;
        padding: 0 8px;
    }

    .item .type:before {
        content: counter(section) ". ";
        counter-increment: section;

    }

    .ghost {
        background-color: yellowgreen;
    }


    .item .kv:not(:first-child) {
        padding-top: 1px;
    }

    .title {
        text-align: center;
        margin-bottom: 10px;
        font-size: larger;
    }

</style>
